<%@page import="org.proddevplm.dao.data.conceptSelection.PughAnalysis"%>
<%@page import="java.util.List"%>

<style>
	.ui-autocomplete {
		max-height: 200px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
		font-size: smaller;
	}
	/* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */
	* html .ui-autocomplete {
		height: 200px;
	}
</style>
<script>

	var elements = '';
	var matrixValues = '';
	
	$(function(){
		$( "button" ).button();
	});
	
	function loadCriteriaResultsPage(page){
		$("#showCriteriaResults").load(page);
	}
	
	function fillMatrix(i, j){
		var id = "element_"+i+"_"+j;
		var newId = "element_"+j+"_"+i;
				
		var value = $('#'+id).val().trim();
		
		if(value.indexOf("/")!=-1){
			if(value.charAt(0)==2 && value.charAt(2)==3){
				var inverseValue = 1.5;
			}
			else{
				var inverseValue = value.charAt(2);
			}
		}
				
		else if(value == 1.5){
			var inverseValue = "2/3";
		}
		
		else if(value == 1){
			var inverseValue = "1";
		}
		
		else {
			var inverseValue = "1/"+value;
		}

		$('#'+newId).val(inverseValue);
	}
	
	function autoFill(id){
		$('#'+id).autocomplete("search", " ");
	}
	
	$(function() {
		var ahpScale = [
			"1/9 ",
			"1/8 ",
			"1/7 ",
			"1/6 ",
			"1/5 ",
			"1/4 ",
			"1/3 ",
			"1/2 ",
			"2/3 ",
			"1 ",
			"1.5 ",
			"2 ",
			"3 ",
			"4 ",
			"5 ",
			"6 ",
			"7 ",
			"8 ",
			"9 "
		];
		$( ".ahp" ).autocomplete({
			source: ahpScale,
		 	close: function(event, ui) { 
		 		event.target.onchange();
		 		}
		});
	});
	
	function calculate(dimension){
		var ahpAnalysisName = $("#ahpName").val();
		//var elements = '';
		//var matrixValues = '';
		for (var i=0; i<dimension; i++){
			var elementId = "elName_"+(i+1);
			var element = $('#'+elementId).html();
			elements+=element+"~";
			for(var j=0; j<dimension; j++){
				var matElId = "element_"+(i+1)+"_"+(j+1);
				var elValue = $('#'+matElId).val();
				
				if(elValue.indexOf("/")!=-1){
					elValue = parseFloat(elValue.charAt(0))/parseFloat(elValue.charAt(2));
				}
				
				matrixValues+=elValue+"~";
			}
		}
		elements = elements.substring(0, elements.length-1);
		matrixValues = matrixValues.substring(0, matrixValues.length-1);
		
		var arguments = "matrixSize="+dimension+"&elements="+elements+"&matrixValues="+matrixValues;
		ajaxCall("toolsManager", "11", arguments, showResults);
	}
	
	var importances="";
	
	function showResults(data){
		importances = data;
		loadCriteriaResultsPage("content/project/devTools/workspace/concepts/criteriaResults.jsp");
	}
	
	function nextStep2(){
		var arguments = "activityName="+activityName+"&criteriaImportances="+importances;
		ajaxCall("toolsManager", "23", arguments, null);
		$("#pughTab3").show();
		$("#pughTab3").click();
	}
		
	
</script>

<%
	PughAnalysis currentPugh = (PughAnalysis)session.getAttribute("currentPugh");	
	String criteriaList = currentPugh.getCriteria();
	String[] criterion = criteriaList.split("~");
	int matrixSize = criterion.length;
%>

<div id="wsContent" style="width:100%; overflow:auto; margin-top:10px;">
	
	<table id="ahpTable" border="1" cellspacing="0" cellpadding="3" style="width:100%; font-size:small">
	
		<tr id="header" style="height:120px; background-color:#F0F0F6">
			<td style="font-weight:bold">Item</td>
			<%for(int i=0; i<criterion.length; i++){%>
				<td style="padding:0"><span class="rotatedText" style="margin-bottom:0px; margin:-20px">
					<%=criterion[i] %>
					</span>
				</td>
			<%}%>
		</tr>
		
		<%
		for(int i=0; i<criterion.length; i++){%>
			<tr style="height:30px">
				<td id="elName_<%=i+1%>"><%=criterion[i]%></td>
				<%for (int j=0; j<criterion.length; j++) {
					if(i==j){%>
						<td style="width:5%; text-align:center">
							<input id="element_<%=i+1 %>_<%=j+1 %>" class="ahp" value="1" style="width:100%; text-align:center; background-color:#b8b8b8; border:none">
						</td>
					<%}else if(i<j){%>
						<td style="width:5%;text-align:center">
							<input id="element_<%=i+1%>_<%=j+1%>" class="ahp" onchange="fillMatrix('<%=i+1%>', '<%=j+1%>')" style="width:100%; text-align:center; border:none" onclick="autoFill('element_<%=i+1%>_<%=j+1%>')">
						</td>
					<%}else{%>
						<td style="width:5%;text-align:center">
							<input id="element_<%=i+1%>_<%=j+1%>" class="ahp" style="width:100%; text-align:center; border:none">
						</td>
					<%}
				}%>
			
			</tr>
			
		<%}
		%>
	
	</table>

</div>

<div style="margin-top:10px;">
	<button id="calculate" name="calculate" onclick="calculate('<%=matrixSize%>')" style="width:150px; margin-top:5px; font-weight: bold; font-size:small; float:left;">Calculate</button>
	<button id="nextStep2" name="nextStep2" onclick="nextStep2()" style="width:150px; margin-top:5px; font-weight:bold; font-size:small; float:right">Next step</button>
</div>
<div style="clear:both"></div>

<div id="showCriteriaResults" style="width:100%; margin-top:10px; float:left;">

</div>
<div style="clear:both"></div>